<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文字垂直跑马灯效果</title>
    <script src="/vue/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div id="loop-show-box">
        <ul id="con1">
            <li class="li-style" v-for="(item, index) in items" :key="index">{{ item }}</li>
        </ul>
        <ul id="con2">
            <li class="li-style" v-for="(item, index) in items" :key="index + items.length">{{ item }}</li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            items: ['测试1号', '测试2号', '测试3号', '测试4号'],
            interval1: null, //这个定时器用于在滚动行为中引入暂停或延迟效果。当滚动达到行高的倍数时（在这里是25像素），同时清除 mytimer 和 mytimer1。在延时1000毫秒（1秒）后，重新启动 mytimer。
            interval2: null, //这个定时器负责以固定的时间间隔（time 毫秒）连续调用
            time: 1000 / 60,
        },
        methods:{
            init() {
                const area = document.getElementById('loop-show-box');
                const con1 = document.getElementById('con1');
                const con2 = document.getElementById('con2');

                // 复制第一个区域的内容到第二个区域
                con2.innerHTML = con1.innerHTML;

                // 定义滚动函数
                const scrollUp = () => {
                    if (area.scrollTop >= con1.offsetHeight) {
                        // 如果滚动到第一个区域的末尾，则回到起始位置
                        area.scrollTop = 0;
                    } else {
                        if (area.scrollTop % 25 === 0) {
                            // 如果滚动的距离是行高的整数倍，停止定时器，稍作延迟后再启动
                            clearInterval(this.interval1);
                            clearInterval(this.interval2);
                            this.interval1 = setTimeout(() => {
                                this.interval2 = setInterval(scrollUp, this.time);
                            }, 1000);
                        }
                        // 向上滚动一行的高度
                        area.scrollTop++;
                    }
                };

                // 启动滚动定时器
                this.interval2 = setInterval(scrollUp, this.time);
            },
        },
        mounted(){
            this.init();
        }
    })

</script>
<style scoped>
    #loop-show-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
    }

    .li-style {
        width: 100%;
        height: 25px;
        text-align: center;
    }

    ul,
    li {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0;
    }
</style>
